<template>
  <div class="app-menu">
    <app-menu-item v-for="(item, index) in menus" :key="item.value" :menu="item"
      :active="route.path == '/' + item.value" @click="selectMenu(item, index)" />
  </div>
</template>

<script setup>
import config from '@/config'

import home from '@/assets/menu/home.png'
import filter from '@/assets/menu/filter.png'
import fangan from '@/assets/menu/fangan.png'
import robot from '@/assets/menu/robot.png'
import vip from '@/assets/menu/vip.png'
import chuhuo from '@/assets/menu/chuhuo.png'
import order from '@/assets/menu/order.png'
import set from '@/assets/menu/set.png'
import ip from '@/assets/menu/ip.png'
import qianbao from '@/assets/menu/qianbao.png'
import rizhi from '@/assets/menu/rizhi.png'


import homeActive from '@/assets/menu/home-active.png'
import filterActive from '@/assets/menu/filter-active.png'
import fanganActive from '@/assets/menu/fangan-active.png'
import robotActive from '@/assets/menu/robot-active.png'
import vipActive from '@/assets/menu/vip-active.png'
import chuhuoActive from '@/assets/menu/chuhuo-active.png'
import orderActive from '@/assets/menu/order-active.png'
import setActive from '@/assets/menu/set-active.png'
import ipActive from '@/assets/menu/ip-active.png'
import qianbaoActive from '@/assets/menu/qianbao-active.png'
import rizhiActive from '@/assets/menu/rizhi-active.png'

import { checkRoles } from '@/stores/roles'
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const sotre = useAppStore()
const { menuIndex, selectMenu } = toRefs(sotre)
const getroles = (value) => {
  return userStore.user.roles.includes(value)
}

const menus = [
  { label: '主页', value: 'home', icon: home, activeIcon: homeActive, show: checkRoles(userStore.user.roles, ['hand_copy', 'auto_copy']) },
  { label: '方案', value: 'fangan', icon: fangan, activeIcon: fanganActive, show: checkRoles(userStore.user.roles, ['hand_copy', 'auto_copy']) },
  { label: '自动', value: 'robot', icon: robot, activeIcon: robotActive, show: false },
  { label: '票单', value: 'ticket', icon: filter, activeIcon: filterActive, show: true },
  { label: '会员', value: 'vip', icon: vip, activeIcon: vipActive, show: true },
  { label: '下单', value: 'sell', icon: chuhuo, activeIcon: chuhuoActive, show: true },

  { label: '订单', value: 'order', icon: order, activeIcon: orderActive, show: true },

  { label: 'IP', value: 'ip', icon: ip, activeIcon: ipActive, show: true,show: checkRoles(userStore.user.roles, 'ip_buy') },
  { label: '能量', value: 'wallet', icon: qianbao, activeIcon: qianbaoActive, show: true },
  { label: '日志', value: 'log', icon: rizhi, activeIcon: rizhiActive, show: true },
  { label: '设置', value: 'setting', icon: set, activeIcon: setActive, show: true },
]
</script>

<style lang="scss" scoped>
.app-menu {
  display: flex;
  align-items: center;
}
</style>